import React, { Component } from 'react';
import './allViews.css'
import "echarts/lib/chart/line";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title"; // 此处是按需引入
import { searchPrescription ,searchSurroundNodes , searchSurroundNodesTopk } from './api/api';
import { AudioOutlined } from '@ant-design/icons';
import { Input, Space , Button , Col, Row} from 'antd';
import EchartLine from './cluster';
import MyForcemap from './forcemap';
import ParameterArea from './parameterArea'
import DisplayArea from './displayArea/displayArea';
import DurgCard from './displayArea/card';
import PolarBar from './polarBar/polarBar';
import emitter from './utils/events'


const { Search } = Input;


// var dataPath = '../data/text_vectors_afterNormalize'

// export const graphEventBus = new EventEmitter()
class MyViews extends Component {
    echartRef = {}
    title = null
    content = null
    constructor(props) {
        super(props);
        this.state= {
           data:[[],[],[]],
           symptom_relativity_name : ["主题病症相关度","药物关联病症相关度"],
           categories : [],
           title:"",
           content:"",
           highlight_nodes:[],
           mark:['0', '1','2','3','4','5','6','7','8','9','10','11','12','13','14']
        }
    }
    onChange = (newValue) => {
        this.setState({relativity:newValue});
    };

    resetSelectItem = (title , content) =>{
        debugger
        this.title = title
        this.content = content
    }


    resetDataSource = async (value) =>{
        debugger
        // var dic = {}
        // localStorage.setItem("searchDic",JSON.stringify(dic))
        let relativity = localStorage.getItem("主题疾病相关度")
        let res = await searchPrescription({"node":value,"relativity":relativity})
        if(res.code === 200){
            var curdata = new Array()
            var tdata = JSON.parse(res.data)
            emitter.emit("changeRelativities",{nodes:res.search_polar_data.nodes,relativities:res.search_polar_data.relativities})
            // localStorage.setItem("search_polar_data",JSON.stringify(res.search_polar_data))
            localStorage.setItem("target",res.bestmatch)

            curdata.push(tdata["nodes"])
            curdata.push(tdata["links"])
            curdata.push(tdata["categories"])
            emitter.emit("addHighLightNodes",{highlight_nodes:res.highlight_nodes})
        //   this.setState({highlight_nodes:res.highlight_nodes})  
          emitter.emit("resetPrescription",{data:curdata})
        //   this.setState({data:curdata})
        }
    };
    
    render() {
       
      return(
    <div>
        <div style={{width:"100%",height:'100%'}}>
            <Row >
                <Col span={12}>
                    <MyForcemap resetSelectItem={this.resetSelectItem}/>
                </Col>
                <Col span={6}>
                    <DisplayArea />
                </Col>
                <Col span={3}>
                 <DurgCard/>
                </Col>
                <Col span={3}>
                    <ParameterArea/>
                    <Search placeholder="搜索病症名" onSearch={(value)=>this.resetDataSource(value)}    enterButton="搜索" size="large" style={{width: "200px",paddingTop:"20%"}} />
                </Col>
                
            </Row>
        </div>
        <div style={{display:"inline-block",height:"100%",width:"50%"}}><EchartLine /></div>
        <div style={{height:"60%",width:"100%"}}> 
            <Row>
                {this.state.symptom_relativity_name.map((item,k)=>{
                    debugger
                    return (<Col span={12}><PolarBar title={item} > </PolarBar></Col>)
                })}
            </Row>
         </div>
    </div>

      )
    }
}
 
export default MyViews;